<template>
  <!--课程详情-->
  <div v-title :data-title="courseDetail.courseName">
    <headers></headers>
    <div class="padding88">
      <div class="divider">
        <div class="auto">
          <router-link :to="{path:'courselist',query:{coursetype:-1,coursetypeId:''}}">全部课程</router-link><span>></span><router-link :to="{path : 'courselist',query: {coursetype:1,coursetypeId:coursetypeFirst.id}}">{{coursetypeFirst.courseTypeName}}</router-link><span>></span><router-link :to="{path : 'courselist',query: {coursetype:2,coursetypeId:coursetypeSecond.id}}">{{coursetypeSecond.courseTypeName}}</router-link><span>></span>{{courseDetail.courseName}}
        </div>
      </div>
    </div>
    <div class="class_content">
      <div class="auto clearfix">
        <div class="left pull-left">
          <div  v-if="!haveCata"> <img :src="courseDetail.courseImage" width="800" style="height: 500px; object-fit: contain"/></div>
          <div class="prism-player" id="player-con"></div>
          <div class="bottom" >
            <a href="javascript:;" @click.prevent="shouCang">
              <img src="../../assets/yishoucang.png" alt="" width="18" v-if="isCollecon === 1">
              <img src="../../assets/shoucang.png" alt="" width="18" v-else>
              收藏
            </a>
            <!--收藏-->
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;浏览量（{{recordNum}}）
            <div class="pull-right"><span>分享</span>
              <a href="javascript:;" class="weixinshare">
                <img src="../../assets/qq.png" alt="" width="25">
                <img :src="QRCode" alt="" class="share_img" width="100">
              </a>
              <a :href="weiboShare" target="_blank" rel="noopener noreferrer"><img src="../../assets/weibo.png" alt="" width="25" @click="courseShare"></a>
              <a :href="kongjianShare" target="_blank" rel="noopener noreferrer"><img src="../../assets/kongjian.png" alt="" width="25" @click="courseShare"></a>
            </div>
          </div>
        </div>
        <div class="right pull-right">
          <div class="mulu">
            <p>目录</p>
            <div v-if="isBuy === 0 ">
              <div v-for="(cata,cataIndex) in catalogs">
                <p style="padding-top: 10px">{{cata.cataLogTitle}}</p>
                <ul v-if="cata.twoList !== undefined">
                 <li  v-for="(two,index) in cata.twoList" @click.stop="play(cataIndex,index)" :class="{active:index === vCurrent && cataIndex === cataCurrent}">
                   <Icon type="md-lock" v-if="isBuy === 0  && two.isFree !== 0"/>{{two.cataLogNo}}  {{two.cataLogTitle}}
                 </li>
                </ul>
              </div>
            </div>
            <div v-else>
             <span v-for="(cata,cataIndex) in catalogs">
              <p>{{cata.cataLogTitle}}</p>
              <ul>
               <li v-if="cata.twoList !== undefined" v-for="(two,index) in cata.twoList" @click.stop="play(cataIndex,index)" :class="{active:index === vCurrent && cataIndex === cataCurrent}">
                <Icon type="md-lock" v-if="isBuy === 0  && two.isFree !== 0"/>{{two.cataLogNo}}  {{two.cataLogTitle}}
               </li>
              </ul>
            </span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="auto names_title clearfix">
      <div class="pull-left">
        <p>{{courseDetail.courseName}}</p>
        <p v-if="courseDetail.coursePrice === 0 || courseDetail.isFree === 0 || (courseDetail.isVipFree === 0 && isVip > 0)">免费</p>
        <p v-else >价格：￥{{courseDetail.coursePrice}}</p>
      </div>
      <Button  class="pull-right" v-if="isBuy === 0 && courseDetail.coursePrice !== 0" @click="apply" >立即购买</Button>
    </div>
    <div class="auto clearfix twopart padding250">
      <div class="left pull-left">
        <Tabs :animated="false" value="name1">
          <TabPane label="详情" name="name1">
            <div class="top" id="aaaaa">
              <p class="avatar"><img :src="courseDetail.lecturerImg" alt="" width="28">{{courseDetail.lecturerName}}</p>
              <div class="introduce font14">
                <span v-html="courseDetail.lecturerContent"></span>
              </div>
            </div>
            <div class="classes">
              <p class="avatar"><img src="../../assets/des.png" alt="" width="30">课程介绍</p>
              <div class="introduce font14" v-html="courseDetail.detail">
              </div>
            </div>
          </TabPane>
          <TabPane label="评论" name="name2" class="pinglun">
            <Form :model="textArea">
              <FormItem class="textarea">
                <Input v-model="textArea.text" type="textarea"  :maxlength="1500" placeholder="说两句.."/>
                <Button type="primary" size="large" class="submit" @click.stop="reply">发表</Button>
              </FormItem>
            </Form>
            <p class="tip">文明上网理性发言，请遵守评论服务协议</p>
            <p class="all">全部评论（{{replyNum}}条）</p>
            <ul class="list">
              <li v-for="(reply,index) in replys">
                <div class="clearfix">
                  <div class="left_content">
                    <img :src="reply.avatar" alt="" width="40"  v-if="reply.avatar !== ''">
                    <img src="../../assets/usericon.png" alt="" width="40"  v-else>
                    {{reply.nickName}}
                  </div>
                  <p class="pull-right">
                    <a href="" @click.stop.prevent="dianZan(reply.id,index)">{{reply.thumbs}}<img src="../../assets/zan.png" alt="" v-if="reply.isThumbs == 0"><img src="../../assets/zanguo.png" alt="" v-if="reply.isThumbs == 1"></a>
                    <a href="" @click.stop.prevent="revert(index)"><img src="../../assets/ico_001.png" alt="">回复</a>
                  </p>
                  <ul class="pinglun_content">
                    <li>{{reply.commentContent}}</li>
                    <li>{{reply.createTime}}</li>
                  </ul>
                </div>
                <ul class="other_pinglun" v-if="reply.replysTwo.length > 0">
                  <li v-for="rep in reply.replysTwo">{{rep.nickName}}：{{rep.commentContent}}</li>
                </ul>
                <Form>
                <FormItem class="textarea" v-show="index === nowIndex">
                  <Input  type="textarea"  :maxlength="1500" v-model="textArea.textTwo"  placeholder="说两句.."/>
                  <Button type="primary" size="large" class="submit" @click.stop="replyTwo(reply.id)">回复</Button>
                </FormItem>
                </Form>
              </li>
            </ul>
            <Button  size="large" class="look" long @click.stop="lookMore">查看更多评伦</Button>
          </TabPane>
        </Tabs>
      </div>
      <div class="right pull-right">
        <p class="title" @click="isShow = true">推荐课程</p>
        <ul>
          <li class="clearfix" @click="detail(index)" v-for="(recommend,index) in recommends">
            <div class="curse pull-left">
              <img :src="recommend.courseImage" alt="" width="151" height="81">
              <div class="bg"></div>
              <img src="../../assets/play.png" alt="" width="26" class="play">
              <div class="vip" v-if="recommend.isVipFree === 0 && recommend.isFree === 1">VIP</div>
            </div>
            <div class="pull-left shipin wid170">
              <p>{{recommend.courseTitle}}</p>
              <p>{{recommend.courseCount}}视频 <img src="../../assets/usericon.png" alt="" width="16"> {{recommend.lecturerName}}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <asides></asides>
    <Spin fix v-show="isSpinShow" >
      <div class="loader">
        <Icon type="ios-loading" size=26 class="demo-spin-icon-load"></Icon>
        <div class="font14">加载中...</div>
      </div>
    </Spin>
    <footers></footers>
    <loginmodal  ref="loginD"></loginmodal>
  </div>

</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  /* 旋转效果 */
  .demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
  }
  @keyframes ani-demo-spin {
    from { transform: rotate(0deg);}
    50% { transform: rotate(180deg);}
    to { transform: rotate(360deg);}
  }
  /* 假如内容过长，一屏放不下，滚动条下拉覆盖不全 */
  .ivu-spin-fix {
    position: fixed;
  }


  .pinglun{
    .ivu-form-item{
      margin-bottom: 10px;
    }
    .textarea{
      position: relative;
      button{
        position: absolute;
        background-color: #957960;
        color: #fff;
        height: 94px;
        width: 95px;
        right: 0;
        font-size: 19px;
        top:0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }
    li{
      .textarea{
        margin:6px 0 0 55px;
        position: relative;
        button{
          height: 73px;
          width: 95px;
          font-size: 19px;
        }
      }
    }
    .tip{
      font-size: 14px;
      color: #999;
      margin: 0px 0 15px;
    }
    .all{
      /*font-size: 16px;*/
      font-size: 14px;
      color: #000;
      margin-bottom: 20px;
    }
    .list>li{
      border-bottom: 1px dashed #dbdbdb;
      padding-bottom: 15px;
      margin-bottom: 15px;
      /*font-size: 16px;*/
      font-size: 14px;
      color: #000;
      .left_content {
        display: inline-block;
        img{
          border-radius: 50%;
          vertical-align: middle;
          margin-right: 10px;
          height: 40px;
        }
      }
      .pinglun_content{
        line-height: 30px;
        padding-left: 55px;
        li:last-child{
          color: #999;
        }
      }
      .pull-right a{
        /*font-size: 16px;*/
        font-size: 14px;
        color: #999;
        img{
          margin:0 10px;
          vertical-align: sub;
        }
        &:hover{
          color: #957960;
        }
      }
      .other_pinglun{
        background-color: #f9f9f9;
        margin:15px 0 0 55px;
        padding: 20px;
        li{
          /*font-size: 16px;*/
          font-size: 14px;
          color: #000;
          line-height: 25px;
        }
      }
    }
    .list>li:last-child{
      border-bottom: none;
    }
    .look{
      background-color: #f9f9f9;
      height: 56px;
      /*font-size: 16px;*/
      font-size: 14px;
      color: #999;
      border:none;
    }
    .ivu-btn:focus{
      box-shadow: none;
    }
  }
  .ivu-icon{
    font-size: 15px;
    color: #999;
    margin-bottom: 3px;
  }
  .model_header{
    color:#fff;
    text-align:center;
    background-color: #957960;
    height: 77px;
    line-height: 77px;
    font-size: 28px;
  }
  .model_content{
    padding: 30px 50px;
    form img{
      position: absolute;
      left: 10px;
      top:14px
    }
    a{
      display: block;
    }
    .ivu-input{
      border-radius: 0;
      display: inline-block;
      width: 80%;
      height: 61px;
    }
    button{
      background-color: #957960;
      border-color: #957960;
    }
    .send{
      position:absolute ;
      right: 0;
      top: 0;
      height: 61px;
      color: #fff;
      /*font-size: 16px;*/
      font-size: 14px;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    .loginbtn{
      height: 63px;
      font-size: 20px;
    }
  }
  .other{
    /*font-size: 16px;*/
    font-size: 14px;
    color: #999;
    p{
      margin-top: 20px;
    }
    span{
      margin-right: 40px;
    }
    a{
      display: inline-block;
    }
    .margin20{
      margin: 0 10px;
    }
    img{
      vertical-align: bottom;
    }
  }
  .divider{
    height: 53px;
    background-color: #2F261E;
    font-size: 14px;
    color: #fff;
    line-height: 53px;
    text-align: left;
    a{
      color: #fff;
      &:hover{
        color: #9C7649;
        font-weight: 700;
      }
    }
    span{
      margin: 0 10px;
    }
  }
  .class_content{
    background-color: #121212;
  }

  .names_title{
    background-color: #fff;
    color: #000;
    font-size: 22px;
    padding: 30px;
    text-align: left;
    margin-top: 20px;
    p:nth-child(2){
      color: #FF3300;
      margin-top: 5px;
    }
    button{
      margin-left: 10px;
      background-color: #957960;
      border-color: #957960;
      height: 41px;
      width: 159px;
      font-size: 16px;
      color: #fff;
      margin-top: 15px;
    }
  }
  .auto.twopart.clearfix{
    margin-top: 20px;
    .left{
      padding: 20px;
      margin-right: 20px;
      background-color: #fff;
    }
    .right{
      width: 380px;
      height: auto;
      margin-left: 0;
      background-color: #fff;
      .title{
        font-size: 16px;
        color: #000;
        border:none;
      }
      ul{
        padding-top: 0;
      }
      li{
        line-height: normal;
        margin-left: 0;
        margin-bottom: 10px;
        p.pull-left{
          position: relative;
          span{
            background-color: #ff9900;
            border-top-right-radius: 50px;
            border-bottom-right-radius: 50px;
            color: #fff;
            font-size: 12px;
            text-align: center;
            padding: 0px 5px;
            position: absolute;
            bottom: 15px;
            left: 0;
          }

        }
        .wid170{
          width: 171px;
        }
        div.pull-left{
          padding: 0;
          font-size: 14px;
          color: #333;
          margin-left: 20px;
          height: auto;
          p:first-child{
            font-weight: normal;
            height: 48px;
            margin: 0;
          }
          p:last-child{
            font-size: 14px;
            font-weight: normal;
            img{
              vertical-align: middle;
              margin-right: 10px;
            }
            span{
              margin-left: 20px;
            }
          }

        }
        div.curse{
          position: relative;
          margin-left: 0;
          .bg{
            width: 151px;
            height: 81px;
            position: absolute;
            top:0;
            left: 0;
            background-color: rgba(0,0,0,0.39);
          }
          .play{
            position: absolute;
            z-index: 9;
            top:50%;
            left: 50%;
            margin-left: -13px;
            margin-top: -13px;
          }
          .vip{
            padding: 0;
            background: url("../../assets/vip.png") no-repeat;
            width: 24px;
            height: 36px;
            background-size: 100% 100%;
            font-size: 12px;
            color: #fff;
            line-height: 30px;
            text-align: center;
            position: absolute;
            right: 0;
            top:0
          }
          span{
            background-color: #ff9900;
            border-top-right-radius: 50px;
            border-bottom-right-radius: 50px;
            color: #fff;
            font-size: 12px;
            text-align: center;
            padding: 3px 5px;
            position: absolute;
            bottom: 10px;
            left: 0;
          }
        }
        div.shipin p:last-child{
          font-size: 14px;
          color: #999;
          img{
            vertical-align: middle;
            margin: 0 5px 0 20px;
          }
        }
      }

    }
  }
  .auto.clearfix{
    position: relative;
    .left{
      width: 800px;
      text-align: left;
      .bottom{
        background-color: #191919;
        font-size: 14px;
        color: #999;
        padding: 30px 0 30px 20px;
        a{
          color: #999;
        }
        .weixinshare{
          position: relative;
          .share_img{
            position: absolute;
            top:23px;
            left: 0;
            background-color: #fff;
            padding: 5px;
            box-shadow: 0 2px 4px 0 rgba(0,0,0,.1);
            z-index: 2;
            display: none;

          }
          &:hover .share_img{
            display: block;
            transition: all 0.3s;
          }
        }
        img{
          vertical-align: middle;
        }
        >img{
          margin-right: 10px;
        }
        >img:nth-of-type(2){
          margin-left: 30px;
        }
        .pull-right{
          span{
            margin-right: 10px;
          }
          img{
            margin: 0 5px;
          }
        }
      }
      .top{
        margin-bottom: 10px;
      }
      .avatar{
        font-size: 16px;
        color: #000;
        padding-top: 12px;
        img{
          margin-right: 20px;
          vertical-align: middle;
          border-radius: 50%;
        }
      }
      .introduce{
        margin-left: 48px;
        line-height: 30px;
        /*font-size: 16px;*/
        color: #666;
        img{
          max-width: 712px;
          object-fit: contain;
        }
      }
    }
    .right{
      width: 388px;
      margin-left: 10px;
      padding-left: 12px;
      background-color: #2a2a2a;
      text-align: left;
      height: 581px;
      .title{
        font-size: 24px;
        color: #fff;
        border-bottom: 1px solid #f5f5f5;
        padding: 20px 10px 15px;
      }
      .bottom{
        color:#ff3300;
        font-size: 24px;
        position: absolute;
        bottom: 20px;
        right: 20px;
        a{
          color:#999;
        }
      }
      .mulu{
        padding: 15px  0 10px;
        background-color: #191919;
        height: 100%;
        p{
          position: relative;
          color: #fff;
          font-size: 14px;
          padding: 0 0 15px 30px;

        }
        >div{
          height: 529px;
          overflow-y: auto;
          padding-top: 20px;
        }
        >p{
          color: #957960;
          border-bottom: 1px solid #333;
          &:after{
            content: '';
            display: block;
            width: 32px;
            height: 2px;
            background-color: #957960;
            position: absolute;
            bottom: 0;
            left: 28px;
          }
        }
      }
      ul{
        font-size: 14px;
        color: #fff;
        padding-right: 10px;
        li{
          line-height: 30px;
          margin-left: 30px;
          cursor: pointer;
          &:hover{
            color: #9c7649;
          }
        }
        li.active{
          color: #9c7649;
        }
        .color333{
          color: #333;
        }
      }

    }
  }
  //微信图片分享

  .weixinshare{
    position: relative;
    .share_img{
      position: absolute;
      top:23px;
      left: 0;
      background-color: #fff;
      padding: 5px;
      box-shadow: 0 2px 4px 0 rgba(0,0,0,.1);
      z-index: 2;
      display: none;

    }
    &:hover .share_img{
      display: block;
      transition: all 0.3s;
    }
  }
  img{
    vertical-align: middle;
  }
  >img{
    margin-right: 10px;
  }
  >img:nth-of-type(2){
    margin-left: 30px;
  }

</style>
<script type="text/ecmascript-6">
  import asides from '../template/aside'
  import headers from '../template/header'
  import footers from '../template/footer'
  import loginmodal from '../template/loginmodal'
  import {courseDetail,coursetypeWeb,getReplysWeb,reply,collecon,addOrder,centreInfoWeb,findVideo,sendPlan,shareApp} from '../../http'
  import {getStore} from '../../storage'
  export default {
    inject:['reload'],
    name: 'detail',
    props: {},
    data() {
      return {
        isSpinShow:false,
        isShow:false,           //评论框显示
        nowIndex:-1,            //评论框序号
        textArea:{
          text:'',              //一级评论
          textTwo:''            //二级评论
        },
        kongjianShare:'',       //空间分享
        weiboShare:'',          //微博分享
        catalogs:'',            //目录
        courseDetail:'',        //课程详情
        isBuy:2,                //用户是否购买 1是，2否
        isVip:0,                //用户是否是Vip，0否，不为0是
        isCollecon:0,           //用户是否搜藏 0否，1是
        replyNum:0,             //评论总数
        recommends:'',          //推荐视频
        replys:'',              //评论
        courseId:this.$route.query.courseId,    //课程Id
        pageNumber:1,           //评论页数
        url:window.location.href,   //当前链接
        QRCode:'',              //二维码
        coursetypeFirst:'',     //课程一级类别
        coursetypeSecond:'',    //课程二级类别
        accessKeyId:'',         //云点播四个参数
        securityToken:'',
        accessKeySecret:'',
        vid:'',
        allow:false,
        player:'',              //播放器对象
        vCurrent:0,             //当前二级目录序号
        cataCurrent:0,          //当前一级目录序号
        haveCata:false,          //是否有课程视频
        recordNum:0,            //视频浏览量
      };
    },
    methods: {
      //分享获取积分
      courseShare(){
        centreInfoWeb().then(res => {
          if(res.code === 200) {
            //用户收藏
            shareApp({courseId:this.courseId,type:1}).then(res => {
            }).catch()
          }
        })
      },
      //回复框显示
      revert(index){
        if(this.nowIndex === index){
          this.nowIndex = -1;
        }else {
          this.nowIndex = index;
        }
      },
      //课程支付
      apply(){
        if(this.isSpinShow === false) {
          this.isSpinShow = true;
          //查看用户登录状态
          centreInfoWeb().then(res => {
            if (res.code === 200) {
              //创建订单
              addOrder({type: 'OT_COURSE', targetId: this.courseId, applyType: '3'}).then(res => {
                this.isSpinShow = false;
                if (res.code === 200) {
                  //订单创建成功，跳转支付页面
                  this.$router.push({
                    name: 'buy',
                    query: {
                      orderId: res.data.orderId
                    }
                  })
                } else {
                  this.$Notice.warning({
                    title: "购买提醒",
                    desc: res.info,
                    duration: 3,
                  });
                }
              }).catch()
            } else {
              //用户未登录，显示登录框
              this.$refs.loginD.showModal();
            }
          }).catch()
        }
      },
      //默认播放免费视频
      choseIsFree(cata,cataCurrent,vCurrent,nextFree){
        //nextFree作为是否查询下一个免费课程的标志  true当前免费课程不算，查下一个
        let j = cataCurrent;
        let i = vCurrent;
        let len1 = cata.length;
        for(j; j < len1; j++){
          let len2 = cata[j].twoList.length
          for (i; i < len2; i++) {
            if (cata[j].twoList[i].isFree == 0) {
              if(!nextFree) {
                //定义数组，0为vid，1位cataId
                let data = new Array();
                data.push(cata[j].twoList[i].videoId);
                data.push(cata[j].twoList[i].id);
                this.cataCurrent = j;
                this.vCurrent = i;
                return data;
              }
              nextFree = false;
            }
          }
          i=0;
        }
        return null;
      },
      //播放视频切换
      play(cataIndex,index){
        console.info("sss")
        //选择播放的视频是否允许播放
        if(this.catalogs[cataIndex].twoList[index].isFree === 0){
          this.cataCurrent = cataIndex;
          this.vCurrent = index;
          this.player.dispose();
          this.createPlayer(this.catalogs[cataIndex].twoList[index].videoId,this.catalogs[cataIndex].twoList[index].id,false,true)
        }else {
          //判断用户是否登录
          centreInfoWeb().then(res => {
            if (res.code === 200) {
              if(this.isBuy === 1) {
                //允许播放，销毁播放器对象，重新创建
                this.player.dispose();
                this.cataCurrent = cataIndex;
                this.vCurrent = index;
                this.createPlayer(this.catalogs[cataIndex].twoList[index].videoId,this.catalogs[cataIndex].twoList[index].id,true,true);
              }else {
                //没有购买视频
                this.$Notice.open({
                  title: "这一课你值得拥有",
                  desc: "购买后可立即观看",
                  duration: 3
                });
              }
            } else {
              //未登录
              this.$refs.loginD.showModal();
            }
          }).catch()
        }
      },
      //查看更多评论
      lookMore(){
        this.pageNumber = this.pageNumber + 1;
        //获取更多评论
        getReplysWeb({courseId:this.courseId,pageNumber:this.pageNumber}).then(res => {
          this.replys = this.replys.concat(res.data.replys);
          this.replyNum = res.data.replyNum;
        }).catch()
      },
      reply(){                          //发表一级评论
        //用户是否登录
        centreInfoWeb().then(res => {
          if (res.code === 200) {
            //一级评论发表必须先购买视频
            if (this.isBuy === 1) {
              //评论
              if (this.textArea.text.trim() !== '') {
                reply({
                  content: this.textArea.text.trim(),
                  targetId: this.courseId,
                  type: 1
                }).then(res => {
                  if (res.code === 200) {
                    //评论成功
                    getReplysWeb({
                      courseId: this.courseId,
                      pageNumber: 1,
                    }).then(res => {
                      this.replys = res.data.replys;
                      this.replyNum = res.data.replyNum;
                      this.textArea.text = '';
                      this.pageNumber = 1;
                    }).catch()
                  }
                })
              }
            } else {
              //未购买视频
              this.$Notice.open({
                title: "这一课你值得拥有",
                desc: "请购买后评论",
                duration: 3
              });
            }
          } else {
            //未登录
            this.$refs.loginD.showModal();
          }
        }).catch()
      },
      replyTwo(id){               //发表二级评论
        if (this.textArea.textTwo.trim() !== '') {
          //发表评论必须登录
          centreInfoWeb().then(res => {
              if(res.code === 200){
                //发表评论
                reply({
                  content: this.textArea.textTwo.trim(),
                  targetId: id,
                  type: 2
                }).then(res => {
                  if (res.code === 200) {
                    //评论成功
                    getReplysWeb({
                      courseId: this.courseId,
                      pageNumber: 1,
                    }).then(res => {
                      this.replys = res.data.replys;
                      this.replyNum = res.data.replyNum;
                      this.textArea.textTwo = '';
                      this.pageNumber = 1;
                      this.nowIndex = -1;
                    }).catch()
                  }
                }).catch()
              }else{
                //用户未登录
                this.$refs.loginD.showModal();
              }
          }).catch()
        }
      },
      //用户点赞
      dianZan : function(replyId,index){
        collecon({targetId:replyId,type:3,optType:2}).then(res =>{
          if(this.replys[index].isThumbs === 1){
            this.replys[index].isThumbs = 0;
            this.replys[index].thumbs = this.replys[index].thumbs - 1;
          }else {
            this.replys[index].isThumbs = 1;
            this.replys[index].thumbs = this.replys[index].thumbs + 1;
          }
        }).catch()
      },
      //用户收藏
      shouCang : function () {
        centreInfoWeb().then(res => {
            if(res.code === 200) {
              collecon({targetId:this.courseId,type:'1',optType:1}).then(res =>{
                if(res.data === 1){
                  this.isCollecon = 1;
                }
                if(res.data === 3){
                  this.isCollecon = 0;
                }
              }).catch()
            }else{
              //用户未登录
              this.$refs.loginD.showModal();
            }
        }).catch()
      },
      //推荐课程切换
      detail(index){
        let cour = this.recommends[index];
        this.$router.push({
          name:'coursedetail',
          query:{courseId:cour.courseId},
        });
        this.reload();
        this.$route.meta.title = this.courseDetail.courseName;
      },
      //创建播放器对象
      createPlayer(vid,cataId,isLogin,isPlay) {
        let vp = this;
        let ended = function () {
          //注：cata是为了保存cataId，这里调用了centreInfoWeb用来判断用户是否登录，随后更新学习计划。
          // 因为接口请求的慢，播放器对象已经创建导致cataId发生改变，更新学习计划使用的cataId变成下一个cataId，故定义变量保存cataId
          let cata = cataId;
          centreInfoWeb().then(res => {
            if (res.code === 200) {
              sendPlan({catalogId: cata}).then(res => {
              }).catch()
            }
          }).catch()
          //播放完成，自动播放下一个
          //用户已经购买直接播放下一个视频
          if(vp.isBuy == 1){
            //二级目录还有课程
            if(vp.vCurrent + 1 < vp.catalogs[vp.cataCurrent].twoList.length){
              vp.vCurrent ++ ;
              vid = vp.catalogs[vp.cataCurrent].twoList[vp.vCurrent].videoId;
              cataId = vp.catalogs[vp.cataCurrent].twoList[vp.vCurrent].id;
              vp.player.dispose();
              vp.player = new Aliplayer({
                "id": "player-con",
                "vid": vid,
                "accessKeyId": vp.accessKeyId,
                "securityToken": vp.securityToken,
                "accessKeySecret": vp.accessKeySecret,
                "region": "cn-shanghai",
                "format": "mp4",
                "mediaType": "video",
                "width": "100%",
                "height": "500px",
                "autoplay": true,
                "isLive": false,
                "rePlay": false,
                "playsinline": true,
                "preload": true,
                "controlBarVisibility": "hover",
                "useH5Prism": true,
                "skinLayout": [
                  {
                    "name": "bigPlayButton",
                    "align": "blabs",
                    "x": 30,
                    "y": 80
                  },
                  {
                    "name": "H5Loading",
                    "align": "cc"
                  },
                  {
                    "name": "errorDisplay",
                    "align": "tlabs",
                    "x": 0,
                    "y": 0
                  },
                  {
                    "name": "infoDisplay"
                  },
                  {
                    "name": "tooltip",
                    "align": "blabs",
                    "x": 0,
                    "y": 56
                  },
                  {
                    "name": "thumbnail"
                  },
                  {
                    "name": "controlBar",
                    "align": "blabs",
                    "x": 0,
                    "y": 0,
                    "children": [
                      {
                        "name": "progress",
                        "align": "blabs",
                        "x": 0,
                        "y": 44
                      },
                      {
                        "name": "playButton",
                        "align": "tl",
                        "x": 15,
                        "y": 12
                      },
                      {
                        "name": "timeDisplay",
                        "align": "tl",
                        "x": 10,
                        "y": 7
                      },
                      {
                        "name": "fullScreenButton",
                        "align": "tr",
                        "x": 10,
                        "y": 12
                      },
                      {"name": "speedButton", "align": "tr", "x": 10, "y": 23},
                      {
                        "name": "volume",
                        "align": "tr",
                        "x": 5,
                        "y": 10
                      },
                      {
                        "name": "setting",
                        "align": "tr",
                        "x": 15,
                        "y": 12
                      },
                      {
                        "name": "speed",
                        "align": "tr",
                        "x": 10,
                        "y": 23
                      },
                    ]
                  }
                ]
              }, function (player) {
                console.info("aaaaaa")
                player._switchLevel = 0;
                document.getElementsByClassName("prism-setting-cc")[0].style.display = "none";
                document.getElementsByClassName("prism-setting-audio")[0].style.display = "none";
                let play = function () {
                  if (isLogin) {
                    centreInfoWeb().then(res => {
                      if (res.code === 200) {
                        if (!isPlay) {
                          player.pause()
                          vp.$Notice.open({
                            title: "这一课你值得拥有",
                            desc: "购买后可立即观看",
                            duration: 3
                          });
                        } else {
                          player.play();
                        }
                      } else {
                        //用户未登录，显示登录框
                        vp.$refs.loginD.showModal();
                        player.pause();
                      }
                    }).catch()
                  } else {
                    if (!isPlay) {
                      player.pause()
                      vp.$Notice.open({
                        title: "这一课你值得拥有",
                        desc: "购买后可立即观看",
                        duration: 3
                      });
                    } else {
                      player.play();
                    }
                  }
                }
                player.on('play', play)
                vp.player.on('ended', ended);
              })
              //二级目录没有课程切换一级目录
              //仍有下一个一级目录且该一级目录有二级目录
            }else if( vp.cataCurrent + 1 < vp.catalogs.length && vp.catalogs[vp.cataCurrent].twoList.length > 0){
              vp.cataCurrent++;
              vp.vCurrent = 0;
              vid =  vp.catalogs[vp.cataCurrent].twoList[vp.vCurrent].videoId;
              cataId = vp.catalogs[vp.cataCurrent].twoList[vp.vCurrent].id;
              vp.player.dispose();
              vp.player = new Aliplayer({
                "id": "player-con",
                "vid": vid,
                "accessKeyId": vp.accessKeyId,
                "securityToken": vp.securityToken,
                "accessKeySecret": vp.accessKeySecret,
                "region": "cn-shanghai",
                "format": "mp4",
                "mediaType": "video",
                "width": "100%",
                "height": "500px",
                "autoplay": true,
                "isLive": false,
                "rePlay": false,
                "playsinline": true,
                "preload": true,
                "controlBarVisibility": "hover",
                "useH5Prism": true,
                "skinLayout": [
                  {
                    "name": "bigPlayButton",
                    "align": "blabs",
                    "x": 30,
                    "y": 80
                  },
                  {
                    "name": "H5Loading",
                    "align": "cc"
                  },
                  {
                    "name": "errorDisplay",
                    "align": "tlabs",
                    "x": 0,
                    "y": 0
                  },
                  {
                    "name": "infoDisplay"
                  },
                  {
                    "name": "tooltip",
                    "align": "blabs",
                    "x": 0,
                    "y": 56
                  },
                  {
                    "name": "thumbnail"
                  },
                  {
                    "name": "controlBar",
                    "align": "blabs",
                    "x": 0,
                    "y": 0,
                    "children": [
                      {
                        "name": "progress",
                        "align": "blabs",
                        "x": 0,
                        "y": 44
                      },
                      {
                        "name": "playButton",
                        "align": "tl",
                        "x": 15,
                        "y": 12
                      },
                      {
                        "name": "timeDisplay",
                        "align": "tl",
                        "x": 10,
                        "y": 7
                      },
                      {
                        "name": "fullScreenButton",
                        "align": "tr",
                        "x": 10,
                        "y": 12
                      },
                      {"name": "speedButton", "align": "tr", "x": 10, "y": 23},
                      {
                        "name": "volume",
                        "align": "tr",
                        "x": 5,
                        "y": 10
                      },
                      {
                        "name": "setting",
                        "align": "tr",
                        "x": 15,
                        "y": 12
                      },
                      {
                        "name": "speed",
                        "align": "tr",
                        "x": 10,
                        "y": 23
                      },
                    ]
                  }
                ]
              }, function (player) {
                console.info("bbbbbbb")
                player._switchLevel = 0;
                document.getElementsByClassName("prism-setting-cc")[0].style.display = "none";
                document.getElementsByClassName("prism-setting-audio")[0].style.display = "none";
                let play = function () {
                  if (isLogin) {
                    centreInfoWeb().then(res => {
                      if (res.code === 200) {
                        if (!isPlay) {
                          player.pause()
                          vp.$Notice.open({
                            title: "这一课你值得拥有",
                            desc: "购买后可立即观看",
                            duration: 3
                          });
                        } else {
                          player.play();
                        }
                      } else {
                        //用户未登录，显示登录框
                        vp.$refs.loginD.showModal();
                        player.pause();
                      }
                    }).catch()
                  } else {
                    if (!isPlay) {
                      player.pause()
                      vp.$Notice.open({
                        title: "这一课你值得拥有",
                        desc: "购买后可立即观看",
                        duration: 3
                      });
                    } else {
                      player.play();
                    }
                  }
                }
                player.on('play', play);
                vp.player.on('ended', ended);
              })
            }//还存在一种情况，没有一级目录没有二级目录，不在创建播放器对象，故不适用else
          }else {
            //用户没有购买，播放免费视频
            let data = vp.choseIsFree(vp.catalogs,vp.cataCurrent,vp.vCurrent,true)
            //data不为空说明还存在免费视频，继续播放
            if(data !== null){
              vid = data[0];
              cataId = data[1];
              vp.player.dispose();
              vp.player = new Aliplayer({
                "id": "player-con",
                "vid": vid,
                "accessKeyId": vp.accessKeyId,
                "securityToken": vp.securityToken,
                "accessKeySecret": vp.accessKeySecret,
                "region": "cn-shanghai",
                "format": "mp4",
                "mediaType": "video",
                "width": "100%",
                "height": "500px",
                "autoplay": true,
                "isLive": false,
                "rePlay": false,
                "playsinline": true,
                "preload": true,
                "controlBarVisibility": "hover",
                "useH5Prism": true,
                "skinLayout": [
                  {
                    "name": "bigPlayButton",
                    "align": "blabs",
                    "x": 30,
                    "y": 80
                  },
                  {
                    "name": "H5Loading",
                    "align": "cc"
                  },
                  {
                    "name": "errorDisplay",
                    "align": "tlabs",
                    "x": 0,
                    "y": 0
                  },
                  {
                    "name": "infoDisplay"
                  },
                  {
                    "name": "tooltip",
                    "align": "blabs",
                    "x": 0,
                    "y": 56
                  },
                  {
                    "name": "thumbnail"
                  },
                  {
                    "name": "controlBar",
                    "align": "blabs",
                    "x": 0,
                    "y": 0,
                    "children": [
                      {
                        "name": "progress",
                        "align": "blabs",
                        "x": 0,
                        "y": 44
                      },
                      {
                        "name": "playButton",
                        "align": "tl",
                        "x": 15,
                        "y": 12
                      },
                      {
                        "name": "timeDisplay",
                        "align": "tl",
                        "x": 10,
                        "y": 7
                      },
                      {
                        "name": "fullScreenButton",
                        "align": "tr",
                        "x": 10,
                        "y": 12
                      },
                      {"name": "speedButton", "align": "tr", "x": 10, "y": 23},
                      {
                        "name": "volume",
                        "align": "tr",
                        "x": 5,
                        "y": 10
                      },
                      {
                        "name": "setting",
                        "align": "tr",
                        "x": 15,
                        "y": 12
                      },
                      {
                        "name": "speed",
                        "align": "tr",
                        "x": 10,
                        "y": 23
                      },
                    ]
                  }
                ]
              }, function (player) {
                console.info("ccccccc")
                player._switchLevel = 0;
                document.getElementsByClassName("prism-setting-cc")[0].style.display = "none";
                document.getElementsByClassName("prism-setting-audio")[0].style.display = "none";
                let play = function () {
                  if (isLogin) {
                    centreInfoWeb().then(res => {
                      if (res.code === 200) {
                        if (!isPlay) {
                          player.pause()
                          vp.$Notice.open({
                            title: "这一课你值得拥有",
                            desc: "购买后可立即观看",
                            duration: 3
                          });
                        } else {
                          player.play();
                        }
                      } else {
                        //用户未登录，显示登录框
                        vp.$refs.loginD.showModal();
                        player.pause();
                      }
                    }).catch()
                  } else {
                    if (!isPlay) {
                      player.pause()
                      vp.$Notice.open({
                        title: "这一课你值得拥有",
                        desc: "购买后可立即观看",
                        duration: 3
                      });
                    } else {
                      player.play();
                    }
                  }
                }
                player.on('play', play)
                vp.player.on('ended', ended);
              })
            }
          }
        }
        this.player = new Aliplayer({
          "id": "player-con",
          "vid": vid,
          "accessKeyId": vp.accessKeyId,
          "securityToken": vp.securityToken,
          "accessKeySecret": vp.accessKeySecret,
          "region": "cn-shanghai",
          "format": "mp4",
          "mediaType": "video",
          "width": "100%",
          "height": "500px",
          "autoplay": true,
          "isLive": false,
          "rePlay": false,
          "playsinline": true,
          "preload": true,
          "controlBarVisibility": "hover",
          "useH5Prism": true,
          "skinLayout": [
            {
              "name": "bigPlayButton",
              "align": "blabs",
              "x": 30,
              "y": 80
            },
            {
              "name": "H5Loading",
              "align": "cc"
            },
            {
              "name": "errorDisplay",
              "align": "tlabs",
              "x": 0,
              "y": 0
            },
            {
              "name": "infoDisplay"
            },
            {
              "name": "tooltip",
              "align": "blabs",
              "x": 0,
              "y": 56
            },
            {
              "name": "thumbnail"
            },
            {
              "name": "controlBar",
              "align": "blabs",
              "x": 0,
              "y": 0,
              "children": [
                {
                  "name": "progress",
                  "align": "blabs",
                  "x": 0,
                  "y": 44
                },
                {
                  "name": "playButton",
                  "align": "tl",
                  "x": 15,
                  "y": 12
                },
                {
                  "name": "timeDisplay",
                  "align": "tl",
                  "x": 10,
                  "y": 7
                },
                {
                  "name": "fullScreenButton",
                  "align": "tr",
                  "x": 10,
                  "y": 12
                },
                {"name": "speedButton", "align": "tr", "x": 10, "y": 23},
                {
                  "name": "volume",
                  "align": "tr",
                  "x": 5,
                  "y": 10
                },
                {
                  "name": "setting",
                  "align": "tr",
                  "x": 15,
                  "y": 12
                },
                {
                  "name": "speed",
                  "align": "tr",
                  "x": 10,
                  "y": 23
                },
              ]
            }
          ]
        }, function (player) {
          console.info("ddddddd")
          player._switchLevel = 0;
          document.getElementsByClassName("prism-setting-cc")[0].style.display = "none";
          document.getElementsByClassName("prism-setting-audio")[0].style.display = "none";
          player.on('ended',ended);
          console.info("isPlayOne：" + isPlay)
          let play = function () {
            console.info("isLogin：" + isLogin)
            if (isLogin) {
              centreInfoWeb().then(res => {
                console.info("res：" + JSON.stringify(res))
                if (res.code === 200) {
                  if (!isPlay) {
                    player.pause()
                    vp.$Notice.open({
                      title: "这一课你值得拥有",
                      desc: "购买后可立即观看",
                      duration: 3
                    });
                  } else {
                    player.play();
                  }
                } else {
                  //用户未登录，显示登录框
                  vp.$refs.loginD.showModal();
                  player.pause();
                }
              }).catch()
            } else {
              console.info("isPlay：" + isPlay)
              if (!isPlay) {
                player.pause()
                vp.$Notice.open({
                  title: "这一课你值得拥有",
                  desc: "购买后可立即观看",
                  duration: 3
                });
              } else {
                player.play();
              }
            }
          }
          player.on('play', play)
        })

        // this.player.on('ended', ended);
        //发生鉴权过期（重新获取4个参数并创建播放器对象）
        let error = function (e) {
          if(e.paramData.error_code === 4500) {
            findVideo({videoId: vid}).then(res =>  {
              if (res.code === 200) {
                this.accessKeySecret = res.data.akSecret;
                this.accessKeyId = res.data.akid;
                this.securityToken = res.data.token;
                // this.createPlayer(vid,cataId,false,true)
                // this.player.replayByVidAndAuthInfo(vid,res.data.akid,res.data.akSecret,"CAIS/gF1q6Ft5B2yfSjIr4jwefeMt5574LuaZVzFt3UyWP5uiLCShzz2IH5KeHBvCOoetf0xn2hY7/8alqZpTJtIfkHfdsp36LJe9A7590JaEgHwv9I+k5SANTW5LXyShb3zAYjQSNfaZY3aCTTtnTNyxr3XbCirW0ffX7SClZ9gaKZ4PGSmajYURq0hRG1YpdQdKGHaONu0LxfumRCwNkdzvRdmgm4NgsbWgO/ks0SD0AChk7ZP/96pe8n9NvMBZskvD42Hu8VtbbfE3SJq7BxHybx7lqQs+02c4I/BWgYAuU3darSPqo02dVdjArE7HaRDrvn1kux4p/wMfi5CO+fdVxqAAXSNBgUA2aN+W7MZqdjJtEdYB2JDVuRM6WX4/ruXd+EkOKAFsuhD+jiEcnfRu8QyZtfwJnwgsSjI948p9BA2Lu0O87I3VZ6I8YGM0FAlu4vC25rH5jX76JmOVFQE08wO8FnZOn50cl0QaKzaty4PNSxgWvD8vBn5LYlQdeVEGbtT")
                //销毁播放器对象
               /* if(this.player.dispose() !== undefined ) {
                  this.player.dispose();
                }*/
                this.player = new Aliplayer({
                  "id": "player-con",
                  "vid": vid,
                  "accessKeyId": this.accessKeyId,
                  "securityToken": this.securityToken,
                  "accessKeySecret": this.accessKeySecret,
                  "region": "cn-shanghai",
                  "format": "mp4",
                  "mediaType": "video",
                  "width": "100%",
                  "height": "500px",
                  "autoplay": true,
                  "isLive": false,
                  "rePlay": false,
                  "playsinline": true,
                  "preload": true,
                  "controlBarVisibility": "hover",
                  "useH5Prism": true,
                  "skinLayout": [
                    {
                      "name": "bigPlayButton",
                      "align": "blabs",
                      "x": 30,
                      "y": 80
                    },
                    {
                      "name": "H5Loading",
                      "align": "cc"
                    },
                    {
                      "name": "errorDisplay",
                      "align": "tlabs",
                      "x": 0,
                      "y": 0
                    },
                    {
                      "name": "infoDisplay"
                    },
                    {
                      "name": "tooltip",
                      "align": "blabs",
                      "x": 0,
                      "y": 56
                    },
                    {
                      "name": "thumbnail"
                    },
                    {
                      "name": "controlBar",
                      "align": "blabs",
                      "x": 0,
                      "y": 0,
                      "children": [
                        {
                          "name": "progress",
                          "align": "blabs",
                          "x": 0,
                          "y": 44
                        },
                        {
                          "name": "playButton",
                          "align": "tl",
                          "x": 15,
                          "y": 12
                        },
                        {
                          "name": "timeDisplay",
                          "align": "tl",
                          "x": 10,
                          "y": 7
                        },
                        {
                          "name": "fullScreenButton",
                          "align": "tr",
                          "x": 10,
                          "y": 12
                        },
                        {"name": "speedButton", "align": "tr", "x": 10, "y": 23},
                        {
                          "name": "volume",
                          "align": "tr",
                          "x": 5,
                          "y": 10
                        },
                        {
                          "name": "setting",
                          "align": "tr",
                          "x": 15,
                          "y": 12
                        },
                        {
                          "name": "speed",
                          "align": "tr",
                          "x": 10,
                          "y": 23
                        },
                      ]
                    }
                  ]
                }, function (player) {
                  console.info("qqqqqq")
                  player._switchLevel = 0;
                  document.getElementsByClassName("prism-setting-cc")[0].style.display = "none";
                  document.getElementsByClassName("prism-setting-audio")[0].style.display = "none";
                  let play = function () {
                    if (isLogin) {
                      centreInfoWeb().then(res => {
                        if (res.code === 200) {
                          if (!isPlay) {
                            player.pause()
                            vp.$Notice.open({
                              title: "这一课你值得拥有",
                              desc: "购买后可立即观看",
                              duration: 3
                            });
                          } else {
                            player.play();
                          }
                        } else {
                          //用户未登录，显示登录框
                          vp.$refs.loginD.showModal();
                          player.pause();
                        }
                      }).catch()
                    } else {
                      if (!isPlay) {
                        player.pause()
                        vp.$Notice.open({
                          title: "这一课你值得拥有",
                          desc: "购买后可立即观看",
                          duration: 3
                        });
                      } else {
                        player.play();
                      }
                    }
                  }
                  player.on('play', play)
                  player.on('ended', ended);
                })
              }
            }).catch()
          }
        }
        this.player.on('error', error);
      },
      //首次播放
      initPlay(){
        //获取课程类型
        coursetypeWeb({courseId: this.courseId}).then(res => {
          this.coursetypeFirst = res.data.coursetypeFirst;
          this.coursetypeSecond = res.data.coursetypeSecond;
        }).catch();
        //获取课程详细信息（播放器需要的4个参数）
        courseDetail({courseId: this.courseId, pageNumber: 1, url: this.url}).then(res => {
          this.isSpinShow = false;
          //浏览器标题配置
          this.catalogs = res.data.catalog;
          this.recordNum = res.data.recordNum;
          this.isVip = res.data.isVip;
          this.courseDetail = res.data.courseDetail;
          this.isBuy = res.data.isBuy;
          this.isCollecon = res.data.isCollecon;
          this.recommends = res.data.recommends;
          this.replys = res.data.replys;
          this.replyNum = res.data.replyNum;
          this.QRCode = "data:image/png;base64," + res.data.QRCode;
          this.accessKeyId = res.data.akid;
          this.securityToken = res.data.token;
          this.accessKeySecret = res.data.akSecret;
          if (res.data.catalog.length > 0) {
            if (res.data.catalog[0].twoList.length > 0) {
              this.haveCata = true;
              //用户是否购买
              if (res.data.isBuy > 0) {
                //用户已购买，购买之后播放第一个视频
                let vid = res.data.catalog[0].twoList[0].videoId
                let cataId = res.data.catalog[0].twoList[0].id;
                this.cataCurrent = 0;
                this.vCurrent = 0;
                this.createPlayer(vid, cataId, false, true)
              }else {
                //目录里是否有免费课程
                //课程是否免费，免费课程用户不必登录
                let data = this.choseIsFree(this.catalogs,this.cataCurrent,this.vCurrent,false);
                if(data !== null){
                  this.createPlayer(data[0], data[1], false, true)
                }else {
                  this.cataCurrent = 0;
                  this.vCurrent = 0;
                  this.createPlayer(res.data.catalog[0].twoList[0].videoId, res.data.catalog[0].twoList[0].id, false, false);
                }
              }
            } else {
              this.haveCata = false;
            }
          } else {
            this.haveCata = false;
          }
          this.$route.meta.title = this.courseDetail.courseName;
          //分享
          this.kongjianShare = "http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?" + "title=" + encodeURIComponent(this.courseDetail.courseName) + "&url=" + encodeURIComponent(res.data.urlShare) + "&summary=" + encodeURIComponent(res.data.content.replace(/&nbsp;/g,'')) + "\"";
          this.weiboShare = "http://service.weibo.com/share/share.php?title=【" + encodeURIComponent(this.courseDetail.courseName) + "】" + encodeURIComponent(res.data.content.replace(/&nbsp;/g,'')) + "&url=" + encodeURIComponent(res.data.urlShare) + "&appkey=411882175" + "\"";
        }).catch();
      }
    },
    created() {
      if(this.isSpinShow === false) {
        this.isSpinShow = true;
        if(getStore('token') !== null && getStore('token') !== undefined && getStore('token') !== '') {
          //获取用户信息
          centreInfoWeb().then(res => {
              if (res.code === 200) {
              this.initPlay()
              } else {
                this.initPlay();
              }
          }).catch()
        }else {
          this.initPlay();
        }
      }
    },
  components: {
      asides,
      headers,
      footers,
      loginmodal
    }
  }
</script>


